<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="24">
        <div class="list-table mb15">
          <div class="area-header">
            <span class="area-header-title">{{ $t('项目估值') }}</span>
          </div>
          <ul v-loading="loadingIndicators" class="indicatorsBox">
            <li>
              <span>{{ indicatorsData.count || 0 }}</span>
              <p>{{ $t('在投项目个数') }}</p>
              <img :src="svg1">
            </li>
            <li>
              <span>{{ moneyFormat(indicatorsData.fk, 'w', 2) || 0 }}</span>
              <p>{{ $t('累计投资成本') }}{{ $t('金额单位') }}</p>
              <img :src="svg2">
            </li>
            <li>
              <span>{{ moneyFormat(indicatorsData.hk, 'w', 2) || 0 }}</span>
              <p>{{ $t('累计回款金额') }}{{ $t('金额单位') }}</p>
              <img :src="svg3">
            </li>
            <li>
              <span>{{ moneyFormat(indicatorsData.gz, 'w', 2) || 0 }}</span>
              <p>{{ $t('在投项目估值') }}{{ $t('金额单位') }}</p>
              <img :src="svg4">
            </li>
            <li>
              <span>{{ indicatorsData.moic || 0 }}</span>
              <p>{{ $t('MOIC') }}</p>
              <img :src="svg5">
            </li>
            <li>
              <span>{{ moneyFormat(indicatorsData.irrData.irr, 'y', 2) || 0 }}%</span>
              <p>{{ $t('IRR') }}
                <el-tooltip placement="bottom">
                  <div slot="content">
                    1. {{ indicatorsData.irrData.dataTime + $t('前数据计算') }}<br>
                    2. {{ $t('预计现金流时间按') + indicatorsData.irrData.dataTime + $t('计算') }}
                  </div>
                  <i class="el-icon-question" />
                </el-tooltip>
              </p>
              <img :src="svg6">
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="15">
        <div v-loading="echarLoading" class="list-table" style="height: 340px;">
          <barLineChart v-if="chartData.datas.length > 0" height="100%" :chart-data="chartData" />
          <div v-else class="noneData">
            <div>
              <svg-icon icon-class="none" class-name="none-icon" />
              <p>{{ $t('暂无数据') }}</p>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div v-loading="changeLoading" class="list-table" style="height: 340px;">
          <div class="area-header">
            <span class="area-header-title">{{ quarter }}{{ $t('较上季度变化') }}</span>
            <el-select
              v-model="quarter"
              size="mini"
              style="width: 100px;"
              :placeholder="$t('请选择')"
              @change="changeDataLoad"
            >
              <el-option v-for="item in quarterOption" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div class="quarterlyChanges">
            <div class="title">{{ $t('投资情况') }}:</div>
            <div class="flex">
              <p>{{ $t('投资项目') }}:<i>{{ changeData.investmentProjects || 0 }}</i>{{ $t('个') }}</p>
              <p>{{ $t('退出项目') }}:<i>{{ changeData.exitProject || 0 }}</i>{{ $t('个') }}</p>
            </div>
            <div class="flex">
              <p>{{ $t('投资金额') }}:<i>{{ moneyFormat(changeData.investmentAmount, 'w') || 0 }}</i>{{ $t('金额单位') }}</p>
              <p>{{ $t('回款金额') }}:<i>{{ moneyFormat(changeData.collectionAmount, 'w') || 0 }}</i>{{ $t('金额单位') }}</p>
            </div>
          </div>
          <div class="quarterlyChanges">
            <div class="title">{{ $t('估值变化情况') }}:</div>
            <div class="flex">
              <p>{{ $t('增值项目') }}:<i>{{ changeData.valueAddedProjects || 0 }}</i>{{ $t('个') }}</p>
              <p>{{ $t('减值项目') }}:<i>{{ changeData.impairmentItems || 0 }}</i>{{ $t('个') }}</p>
            </div>
            <div class="flex">
              <p>{{ $t('本季度末估值项目') }}:<i>{{ changeData.lastQuarterValuation || 0 }}</i>{{ $t('个') }}</p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="list-table mt15">
      <el-form ref="queryForm" :model="queryParams" :inline="true">
        <el-form-item :label="$t('项目名称')" prop="dealName">
          <el-input
            v-model="queryParams.dealName"
            :placeholder="$t('项目名称')"
            clearable
            @keyup.enter.native="queryHandle"
          />
        </el-form-item>
        <el-form-item :label="$t('行业')" prop="industryFocus">
          <el-select v-model="queryParams.industryFocus" filterable :placeholder="$t('行业')" clearable @keyup.enter.native="queryHandle">
            <el-option
              v-for="dict in industryOption"
              :key="dict.dictValue"
              :label="$t(dict.dictLabel)"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('负责人')" prop="personCharge">
          <UserSelect
            v-model="queryParams.personCharge"
            :placeholder="this.$t('负责人')"
            @keyup.enter.native="queryHandle"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['deal:analysisValuation:edit']"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addHandle"
          >{{ $t('新增') }}
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['deal:analysisValuation:config']"
            icon="el-icon-setting"
            size="mini"
            @click="settingOpenHandle"
          >{{ $t('配置') }}
          </el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="dealAnalysisValuationList" border tooltip-effect="darkTable">
        <el-table-column :label="$t('序号')" type="index" fixed="left" align="center" show-overflow-tooltip width="50">
          <template slot-scope="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('项目名称')" align="center" fixed="left" prop="dealName" min-width="200">
          <template slot-scope="scope">
            <router-link
              target="_blank"
              :to="{path:'/deal/home/dealBaseHome',query:{ id:scope.row.dealId, dealType: 'equity', companyId: scope.row.companyId }}"
              class="link_a"
            >{{ scope.row.dealName }}</router-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('行业')" align="center" prop="industryFocus" min-width="120">
          <template slot-scope="scope">
            <span>{{ (scope.row.industryFocus) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('负责人')" align="center" prop="personCharge" min-width="120">
          <template slot-scope="scope">
            <span>{{ (scope.row.personCharge) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('估值时间')" align="center" prop="valuationTime" min-width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.valuationTime) }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :label="$t('总投资成本') + $t('金额单位')" align="center" prop="totalInvestmentCost" min-width="120">-->
        <!--  <template slot-scope="scope">-->
        <!--    <span>{{ moneyFormat(scope.row.totalInvestmentCost, 'w', 2) }}</span>-->
        <!--  </template>-->
        <!--</el-table-column>-->
        <!--<el-table-column :label="$t('已回款金额') + $t('金额单位')" align="center" prop="receivedAmount" min-width="120">-->
        <!--  <template slot-scope="scope">-->
        <!--    <span>{{ moneyFormat(scope.row.receivedAmount, 'w', 2) }}</span>-->
        <!--  </template>-->
        <!--</el-table-column>-->
        <el-table-column :label="$t('项目估值') + $t('金额单位')" align="center" prop="dealValuation" min-width="120">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.dealValuation, 'w', 2) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('持股比例(%)')" align="center" prop="dealValuation" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.shareholdingRatio }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :label="$t('IRR')" align="center" prop="irr" min-width="100">-->
        <!--  <template slot-scope="scope">-->
        <!--    <span>{{ moneyFormat(scope.row.irr, 'rate', 2) }}</span>-->
        <!--  </template>-->
        <!--</el-table-column>-->
        <!--<el-table-column :label="$t('MOIC')" align="center" prop="moic" min-width="100">-->
        <!--  <template slot-scope="scope">-->
        <!--    <span>{{ moneyFormat(scope.row.moic) }}</span>-->
        <!--  </template>-->
        <!--</el-table-column>-->
        <el-table-column :label="$t('操作')" align="center" fixed="right" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <el-button
              v-hasPermi="['deal:analysisValuation:export']"
              type="text"
              size="mini"
              :disabled="isEmpty(scope.row.reportFileId)"
              @click="exportReport(scope.row.reportFileId)"
            >
              <el-tooltip :content="$t('重置或搜索检查生成状态')" :disabled="!isEmpty(scope.row.reportFileId)">
                <span v-if="isEmpty(scope.row.reportFileId)"><i class="el-icon-question" />{{ $t('生成中') }}</span>
                <span v-else><i class="el-icon-download" />{{ $t('导出') }}</span>
              </el-tooltip>
            </el-button>
            <el-button
              v-hasPermi="['deal:analysisValuation:edit']"
              size="small"
              type="text"
              icon="el-icon-edit"
              @click="updateHandle(scope.row)"
            >{{ $t('修改') }}
            </el-button>
            <el-button
              v-hasPermi="['deal:analysisValuation:remove']"
              size="small"
              type="text"
              icon="el-icon-delete"
              @click="deleteHandle(scope.row)"
            >{{ $t('删除') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改项目估值对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <dealAnalysisValuationForm ref="dealAnalysisValuationForm" />
    </el-dialog>

    <!-- 导出估值报告 -->
    <!--<el-dialog :title="$t(title)" :visible.sync="reportOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>-->
    <!--  <dealAnalysisValuationReportList ref="dealAnalysisValuationReportList" />-->
    <!--</el-dialog>-->

    <el-dialog :title="$t('估值配置')" :visible.sync="settingOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <dealValuationSettingList ref="dealValuationSettingList" />
    </el-dialog>
  </div>
</template>

<script>
import { listDealAnalysisValuation, delDealAnalysisValuation } from '@/api/deal/analysisValuation/dealAnalysisValuation'
import { downLoadFileOpen } from '@/utils/zipdownload'
import dealAnalysisValuationForm from './dealAnalysisValuationForm.vue'
import dealValuationSettingList from '@/views/deal/analysisValuation/setting/dealValuationSettingList.vue'
// import dealAnalysisValuationReportList from '@/views/deal/analysisValuation/report/dealAnalysisValuationReportList.vue'
import barLineChart from '@/views/chart/barLineChart.vue'
import { getListChange, getListEchart, getListIndicators } from '@/api/deal/analysisValuation/dealAnalysisValuation'
export default {
  components: {
    dealValuationSettingList,
    dealAnalysisValuationForm,
    barLineChart
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 项目估值表格数据
      dealAnalysisValuationList: [],
      // 弹出层标题
      title: '项目估值',
      // 是否显示弹出层
      formOpen: false,
      // reportOpen: false,
      // 查询参数
      queryParams: {
        dealName: undefined,
        industryFocus: undefined,
        personCharge: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      industryOption: [],
      settingOpen: false,
      svg1: require('@/assets/image/projectValuation/1.svg'),
      svg2: require('@/assets/image/projectValuation/2.svg'),
      svg3: require('@/assets/image/projectValuation/3.svg'),
      svg4: require('@/assets/image/projectValuation/4.svg'),
      svg5: require('@/assets/image/projectValuation/5.svg'),
      svg6: require('@/assets/image/projectValuation/6.svg'),
      loadingIndicators: false,
      echarLoading: false,
      changeLoading: false,
      indicatorsData: {},
      chartData: {
        datas: []
      },
      changeData: {},
      quarter: new Date().getFullYear() + '-' + 'Q' + Math.floor(((new Date().getMonth() + 1) % 3 === 0 ? ((new Date().getMonth() + 1) / 3) : ((new Date().getMonth() + 1) / 3 + 1))),
      quarterOption: [new Date().getFullYear() + '-' + 'Q' + Math.floor(((new Date().getMonth() + 1) % 3 === 0 ? ((new Date().getMonth() + 1) / 3) : ((new Date().getMonth() + 1) / 3 + 1)))]
    }
  },
  created() {
    this.getDicts('deal_industry_focus').then(response => {
      this.industryOption = response.data
    })
    this.getList()
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      // 列表6个指标
      this.indicatorsLoad()
      // 列表chart图
      this.echartLoad()
      // 列表季度变化
      this.changeDataLoad()
    },
    /** 首页6个指标 **/
    indicatorsLoad() {
      this.loadingIndicators = true
      getListIndicators().then(response => {
        this.indicatorsData = response.data
        this.loadingIndicators = false
        this.closeLoading()
      }).catch(() => {
        this.loadingIndicators = false
        this.closeLoading()
      })
    },
    /** 加载echart数据 **/
    echartLoad() {
      this.echarLoading = true
      getListEchart().then(response => {
        var rows = response.data
        this.chartData = {
            legend: true,
            valueFormatter: true,
            yAxisName1: '万元',
            datas: [],
            legendLeft: 'center',
            xLabel: []
          }
          if (rows != null) {
            this.chartData.xLabel = rows.xAxisData
            this.chartData.datas = [
              {
                name: this.$t('投资金额'),
                type: 'bar',
                stack: '1',
                data: rows.seriesData[0]
              },
              {
                name: this.$t('回款金额'),
                type: 'bar',
                stack: '1',
                data: rows.seriesData[1]
              },
              {
                name: this.$t('项目估值'),
                type: 'line',
                yAxisIndex: 0,
                data: rows.seriesData[2]
              },
              {
                name: this.$t('现金流结余'),
                type: 'line',
                yAxisIndex: 0,
                data: rows.seriesData[3]
              }
            ]
          }
        if (rows && !this.isEmpty(rows.xAxisData)) {
          var first = rows.xAxisData[0]
          this.quarterOption = []
          var arr = first.replace('Q', '').split('-')
          var outerLoop = true
          for (var i = arr[0]; i <= new Date().getFullYear(); i++) {
            for (var j = 1; j <= 4; j++) {
              if (outerLoop) {
                this.quarterOption.push(i + '-Q' + j)
              }
              if (new Date().getFullYear() + '-' + 'Q' + Math.floor(((new Date().getMonth() + 1) % 3 === 0 ? ((new Date().getMonth() + 1) / 3) : ((new Date().getMonth() + 1) / 3 + 1))) === (i + '-Q' + j)) {
                outerLoop = false
              }
            }
          }
          this.quarterOption = this.quarterOption.reverse()
        }
        this.echarLoading = false
        this.closeLoading()
      }).catch(() => {
        this.echarLoading = false
        this.closeLoading()
      })
    },
    /** 列表季度变化 **/
    changeDataLoad() {
      this.changeLoading = true
      getListChange(this.quarter).then(response => {
        console.log(response)
        this.changeData = response.data
        this.changeLoading = false
        this.closeLoading()
      }).catch(() => {
        this.changeLoading = false
        this.closeLoading()
      })
    },
    closeLoading() {
      if (!this.loadingIndicators && !this.echarLoading && !this.changeLoading) {
        this.loading = false
      }
    },
    /** 查询项目估值列表 */
    getList() {
      this.loading = true
      listDealAnalysisValuation(this.queryParams).then(response => {
        this.dealAnalysisValuationList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        dealId: undefined,
        sourceId: undefined,
        valuationTime: undefined,
        investmentTime: undefined,
        totalInvestmentCost: undefined,
        receivedAmount: undefined,
        remainingInvestmentCost: undefined,
        overallProjectCompany: undefined,
        dealValuation: undefined,
        valuationMethods: undefined,
        valuationChanges: undefined,
        irr: undefined,
        moic: undefined,
        latest: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle() {
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.dealAnalysisValuationForm.init(null)
      })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
      this.formOpen = true
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealAnalysisValuationForm.init(row)
      })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        return delDealAnalysisValuation(row.id)
      }).then(() => {
        this.getList()
        this.msgSuccess(this.$t('删除成功'))
      }).catch(() => {
        this.loading = false
      })
    },
    /** 导出估值报告 **/
    exportReport(fileId) {
      downLoadFileOpen(fileId)
    },
    /** 配置估值list **/
    settingOpenHandle() {
      this.settingOpen = true
    }
  }
}
</script>

<style lang="scss" scoped>
.area-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.quarterlyChanges{
  background: linear-gradient(to right, rgba(241, 248, 255, 1) 60%,#FBFDFF 100%);
  padding: 10px 15px;
  border-radius: 7px;
  margin-bottom: 15px;
  line-height: 35px;
  &:last-child{
    margin: 0;
  }
  .title{
    font-weight: bold;
    font-size: 15px;
    color: #303133;
  }
  .flex{
    display: flex;
    font-size: 14px;
    p{
      margin: 0;
      flex: 1;
      color: rgba(48, 49, 51, .6);
      font-weight: bold;
      i{
        font-style: normal;
        color: #303133;
        margin: 0 10px;
        font-size: 17px;
      }
    }
  }
}
.indicatorsBox{
  display: flex;
  column-gap: 20px;
  overflow: auto;
  padding: 7px 7px 15px;
  margin-bottom: -15px;
  li{
    flex: 1;
    box-shadow: 0 0 6px 2px #e9e9e9;
    border-radius: 10px;
    padding: 10px 15px;
    position: relative;
    overflow: hidden;
    min-width: 220px;
    &::before{
      content: '';
      position: absolute;
      width: 100px;
      height: 100px;
      background: #F0F6FF;
      border-radius: 50%;
      left: -20px;
      top: -40px;
      z-index: 0;
      opacity: 0.7;
    }
    &::after{
      content: '';
      position: absolute;
      width: 50px;
      height: 50px;
      background: #F0F6FF;
      border-radius: 50%;
      right: 75px;
      bottom: -30px;
      z-index: 0;
      opacity: 0.7;
    }
    span{
      font-weight: bold;
      font-size: 22px;
      color: #333333;
      position: relative;
      z-index: 4;
      overflow: hidden;
      display: block;
      text-overflow: ellipsis;
    }
    p{
      margin: 0;
      color: rgba(102, 102, 102, 1);
      font-size: 14px;
      margin-top: 15px;
      position: relative;
      z-index: 2;
      i{
        color: #9b9b9b;
      }
    }
    img{
      position: absolute;
      height: 60px;
      right: 15px;
      top: 10px;
      z-index: 2;
    }
    &:nth-child(2) {
      &::before, &::after{
        background: #F2F1FF;
      }
    }
    &:nth-child(3) {
      &::before, &::after{
        background: #FFF4F1;
      }
    }
    &:nth-child(4) {
      &::before, &::after{
        background: #F0F6FF;
      }
    }
    &:nth-child(5) {
      &::before, &::after{
        background: #FFFAF1;
      }
    }
    &:nth-child(6) {
      &::before, &::after{
        background: #F0F6FF;
      }
    }
  }
}
</style>

